<template>
    <div>

            <view  @click="selectTimeM" style="padding: 0rem 0.5rem;display: flex;
align-items: center;">

<image style="width: 0.8rem;
height: 0.8rem;
padding: 0.3rem;" src="../../style/image/stati/A33.png" alt="">
            <view style="
font-size: 0.65rem;
font-family: PingFang SC;
font-weight: 300;" >{{selectTime}}</view>
            
        </view>



                <u-popup v-model="popupShow" mode="bottom">

           
              <view>
               <view style="text-align: center;margin: 1rem 0rem 0rem 0rem;" >请选择筛选类型:</view>

               <view class="classesifyP">
                
      <view class="classesify">
        <view :class="timeSelectIfy==1?'classesify-puc':'classesify-pucs' "  @click="timePucM" >按月</view>
        <!-- <view class="classesify-pucs" @click="pucM" v-else>代理12</view> -->

        <view class="classesify-buss"  @click="timeBusM" v-if="timeSelectIfy == 2">按日</view>
         <view  class="classesify-bus"  @click="timeBusM" v-else>按日</view>
      </view>
    </view>
            </view>
		</u-popup>

       <u-picker v-model="pickerShow"  @confirm="pickerConfirm"  mode="time"></u-picker>

       <u-select v-model="selectShow" :default-value=[10,10]  mode="mutil-column" :list="timeList" @confirm="selectConfirm"></u-select>
      



    </div>
</template>

<script lang='ts'>
import { Component, Prop, Vue, Watch, Emit } from "vue-property-decorator";

import { findMaintainOrderList } from "../../utils/uniApi";

import Unavbar from "../../uview-ui/components/u-navbar/u-navbar.vue";
import uPicker from "../../uview-ui/components/u-picker/u-picker.vue";
import uPopup from "../../uview-ui/components/u-popup/u-popup.vue";



@Component({
  //   @Component  是一个装修器   不可以在下面写语句
  name: "test",
  components: {
    "u-navbar": Unavbar,
    "u-picker": uPicker,
    "u-popup":uPopup
  },
})
export default class extends Vue {
  public selectTime: any = "";
  public timeSelectIfy: any = 0;
  public popupShow: boolean = false;
  public pickerShow = false;
  public selectShow = false;
  public dateType: string = "month"; //month 按月查询,day 按天查询

  public show = false;
  public dateTime = ""; // 日期

  public timeList = [
    [
      {
        value: "1",
        label: "2010",
      },
      {
        value: "2",
        label: "2011",
      },
      {
        value: "3",
        label: "2012",
      },
      {
        value: "4",
        label: "2013",
      },
      {
        value: "5",
        label: "2014",
      },
      {
        value: "6",
        label: "2015",
      },
      {
        value: "7",
        label: "2016",
      },
      {
        value: "8",
        label: "2017",
      },
      {
        value: "9",
        label: "2018",
      },
      {
        value: "10",
        label: "2019",
      },
      {
        value: "11",
        label: "2020",
      },
      {
        value: "12",
        label: "2021",
      },
    ],
    [
      {
        value: "13",
        label: "1",
      },
      {
        value: "14",
        label: "2",
      },
      {
        value: "15",
        label: "3",
      },
      {
        value: "16",
        label: "4",
      },
      {
        value: "17",
        label: "5",
      },
      {
        value: "18",
        label: "6",
      },
      {
        value: "19",
        label: "7",
      },
      {
        value: "20",
        label: "8",
      },
      {
        value: "21",
        label: "9",
      },
      {
        value: "22",
        label: "10",
      },
      {
        value: "23",
        label: "11",
      },
      {
        value: "24",
        label: "12",
      },
    ],
  ];


    mounted() {
      //获取当月
     

      this.nowDate()

    }

    nowDate(){
  
     let datas= new Date()
  function formatDate(datas:any) { 
var myyear = datas.getFullYear(); 
var mymonth = datas.getMonth()+1; 
var myweekday = datas.getDate(); 

if(mymonth < 10){ 
mymonth = "0" + mymonth; 
} 
if(myweekday < 10){ 
myweekday = "0" + myweekday; 
} 
return (myyear+"-"+mymonth + "-" + myweekday); 
} 

    console.log( formatDate(datas),'日期日期日期' )

    this.selectTime=formatDate(datas).split('-')[0]+'-'+formatDate(datas).split('-')[1]

   

      this.$emit('func',this.selectTime,'month')
        // alert(123)

  }
  selectTimeM() {
    this.popupShow = !this.show;
  }

  pickerConfirm(data: any) {
    console.log("按日起", data);
    this.selectTime = data.year + "-" + data.month + "-" + data.day;

    this.dateType = "day";

    this.dateTime = data.year + "-" + data.month + "-" + data.day;

    let str=data.year + "-" + data.month + "-" + data.day;

      this.$emit('func',str,this.dateType)

    // this.accordingM()
  }

  selectConfirm(data: any) {
    console.log(data);

    let str = (data[0] as any).label + "-" + (data[1] as any).label;

    this.selectTime = str;
    console.log(str);

    this.dateType = "month";
    this.dateTime = str;

      this.$emit('func',str,this.dateType)

    // this.accordingM()
  }

  timeBusM() {
    //方法中获取this
    this.timeSelectIfy = 2;

    this.popupShow = false;
    this.pickerShow = true;

    setTimeout(() => {
      this.timeSelectIfy = 0;
    }, 1000);
  }

  timePucM() {
    console.log(12312312);
    this.timeSelectIfy = 1;

    this.popupShow = false;
    this.selectShow = true;

    setTimeout(() => {
      this.timeSelectIfy = 0;
    }, 1000);
  }
}
</script>

<style  scoped>
.classesifyP {
  text-align: center;
  display: flex;
  justify-content: center;
  padding: 1rem 1rem 3rem 1rem;
}

.classesify {
  width: 6rem;
  height: 1.8rem;
  border: 1px solid #02af74;

  display: flex;
  align-items: center;
  border-radius: 10px;
}

.classesify-puc {
  width: 50%;
  font-size: 0.6rem;
  border-bottom-left-radius: 8px;
  border-top-left-radius: 8px;
  height: 100%;
  line-height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: #02af74;
}
.classesify-pucs {
  width: 50%;
  font-size: 0.6rem;
  border-bottom-left-radius: 8px;
  border-top-left-radius: 8px;
  height: 100%;
  line-height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: white;
}

.classesify-bus {
  width: 50%;
  font-size: 0.6rem;
}
.classesify-buss {
  width: 50%;
  font-size: 0.6rem;
  border-bottom-right-radius: 8px;
  border-top-right-radius: 8px;
  height: 100%;
  line-height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: #02af74;
}
</style>